<template>

    <div class="textbox" :style="textboxstyle">
       <slot></slot>
    </div>
  
</template>

<script>
export default {
    name:'textbox',
    data() {
        return {
            property: 'value',
        };
    },
    props:{
        width:{
            type:Number,
            default:50,
        },
        bgcolor:{
            type:String,
            default:"#0c162d"
        },
        border:{
            type:String,
            default:""
        }
    },
    computed:{
        textboxstyle(){
            return{
                width:this.width+"%",
                backgroundColor:this.bgcolor,
            }
        }
    }
}
</script>

<style scoped>
    .textbox{
        padding-left:20px;
        padding-right: 10px;
        padding-top: 15px;
        padding-bottom: 15px;
        border-radius: 5px;
        font-size: 0.8rem;
        line-height: 1rem;
        border:.5px solid rgb(66, 82, 109);
        position: relative;
        letter-spacing: 0px;
        font-family: ui-monospace,SFMono-Regular,SF Mono,Menlo,Consolas,Liberation Mono,monospace;
    }
   
</style>